<template>
	<div>
  <div class="top">
	<img src="~assets/img/logo.png" alt="" class="logo">
	<nav-tab-top :title="topTitle" class="topTab" :indexName="'navTopIndex'"></nav-tab-top>
		<search class="search"></search>
		<div class="right">
			<a class="login">登录</a>
			<a><div class="vip">开通VIP</div></a>
			<a><div class="keJin">充值</div></a>
		</div>
  </div>
  <div class="bottom">
	  <nav-tab-bottom :title="bottomTitle" :indexName="'navBottomIndex'" class="bottomTab"></nav-tab-bottom>
  </div>
  </div>
</template>

<script>
	import navTabTop from '../common/tab_big.vue'
	import navTabBottom from '../common/tab_small.vue'
	import search from '../common/search.vue'
  export default{
    name:'',
    data(){
      return {
        topTitle:['音乐馆','我的音乐','客户端','开发平台','YIP'],
				bottomTitle:['首页','歌手','新碟','排行榜','分类','歌单','电台','MV','数字专辑','票务']
      }
    },
    methods:{
      
    },
    components:{
       navTabTop,search,navTabBottom
    }
  }
</script>

<style scoped>
	.top{
		display: flex;
		justify-content: center;
		height: 112px;
		align-items: center;
		/* border-bottom: var(--border-grey); */
	}
	.logo{
		width: 170px;
		height: 46px;
	}
	.topTab{
		width: 453px;
		height: var(--big-height);
		margin-left: 20px;
	}
	.search{
		width: 180px;
		margin-left: 40px;
	}
	.right{
		display: flex;
		justify-content: space-between;
	}
	.login{
		flex: 1;
		line-height: 38px;
		margin-left: 20px;
		color: #000000;
		font-size: 15px;
	}
	.vip,.keJin{
		width: 122px;
		height: 38px;
		color: white;
		background-color: var(--bcc-green);
		text-align: center;
		line-height: 38px;
		border-radius: 5%;
		flex: 3;
		margin-left: 10px;
	}
	.keJin{
		color: black;
		background-color: white;
		border: var(--border-grey);
		flex: 2;
	}
	.bottom{
		width: 50%;
		margin: 10px auto;
	}
</style>
